<template>
  <t-modal :title="title" :width="800" :visible="visible" wrapClassName="t-popup-modal"
           @ok="handleOk" @cancel="handleCancel" cancelText="关闭" :destroyOnClose="true">
    <div class="transfer-body">
      <div class="transfer-pane">
        <div class="transfer-pane-tools">
          <a-row style="width: 100%">
            <a-input-search :placeholder="searchPlaceholder" style="width: 100%" @search="onSearch" />
          </a-row>
        </div>
        <div class="transfer-pane-body">
          <a-tree
						v-if="showTree"
						blockNode
						show-icon
						:defaultExpandedKeys="defaultExpandedKeys"
						:tree-data="treeData"
						:replaceFields="replaceFields"
						@select="selectTree"
					>
						<template v-for="item in dataList">
							<icon-fonts
								:slot="item.key"
								:icon="'icon-' + item.icon"
								type="small"
								style="margin-right:5px"
							></icon-fonts>
						</template>
          </a-tree>
        </div>
      </div>
			<div class="divider-box"></div>
      <div class="transfer-pane">
        <div class="transfer-pane-tools">
          <span>已选择({{selectData.length?selectData.length:0}})</span>
          <span @click="selectData = []" class="delete-button">清空</span>
        </div>
        <div class="transfer-pane-body">
					<template v-for="item in selectData">
						<a-tag :key="item.value" closable @close="() => handleTagClose(item.value)">
							{{ item.text }}
						</a-tag>
					</template>
        </div>
      </div>
    </div>
  </t-modal>
</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean
      },
			url: {
				type: String
			},
			dataList: {
				type: Array
			},
			rawTreeData: {
				type: Array
			},
			multiple: {
				type: Boolean
			},
			treeText: {
				type: String
			},
			treeId: {
				type: String
			},
			title: {
				type: String
			},
			searchPlaceholder: {
				type: String
			}
    },
		watch: {
			rawTreeData: {
				deep: true,
				immediate: true,
				handler: function(e){
					if(e.length){
						this.defaultExpandedKeys = [e[0].id]
					}
					this.treeData = e
				}
			}
		},
    data() {
      return {
				treeData: [],
        selectData: [],
				replaceFields: {
					children: 'children',
					title: this.treeText,
					key: this.treeId
				},
				showTree: true,
				defaultExpandedKeys: []
      }
    },
    methods: {
      handleOk() {
				if(!this.selectData.length){
					this.$message.warn('请先选择数据', 1.5)
				}else{
					this.$emit('confirm', this.selectData)
				}
      },
      handleCancel() {
        this.$emit('cancel')
      },
      selectTree(selectedKeys, info) {
        if(!info.selected){
          return
        }
				let props = info.selectedNodes[0].data.props
        if(this.selectData.some(item=> item.value == props.id)){
          return
        }
				if(this.multiple){
					this.selectData.push({
					  text: props[this.treeText],
					  value: props[this.treeId]
					})
				}else{
					this.selectData = [{
						text: props[this.treeText],
						value: props[this.treeId]
					}]
				}
      },
      onSearch(value){
				this.showTree = false
				if(value){
					this.treeData = this.treeFilter(value, JSON.parse(JSON.stringify(this.rawTreeData)))
				}else{
					this.treeData = JSON.parse(JSON.stringify(this.rawTreeData))
				}
				this.$nextTick(() => {
					this.showTree = true
				})
			},
			handleTagClose(key) {
				const data = this.selectData.filter(item => item.value !== key);
				this.selectData = data;
			},
			treeFilter(value, arr){
				if (!arr) {
					return []
				}
				let newarr = [];
				arr.forEach(item => {
					if (item[this.treeText].indexOf(value) > -1) {
						let redata = this.treeFilter(value, item.children);
						let obj = {
							...item,
							children: redata
						}
						newarr.push(obj);
					} else {
						if (item.children && item.children.length > 0) {
							let redata = this.treeFilter(value, item.children);
							let obj = {
								...item,
								children: redata
							};
							if (redata && redata.length > 0) {
								newarr.push(obj);
							}
						}
					}
				});
				return newarr;
			},
    },

  }
</script>

<style scoped lang="less">
	/deep/.ant-modal-body{
		background-color: #F0F2F5 !important;
		padding: 10px !important;
	}
  .transfer-body {
    line-height: 32px;
    display: flex;
    width: 100%;
    height: 400px;
    justify-content: space-around;
    .transfer-pane {
			padding: 10px;
			background-color: #fff;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
			flex: 1;
      .transfer-pane-tools {
        height: 40px;
        display: flex;
        justify-content: space-between;
        .delete-button{
          cursor: pointer;
          color: red;
        }
      }
      .transfer-pane-body {
        width: 100%;
        height: calc(100% - 40px);
        overflow: auto;
        overflow-x: hidden;
        font-size: 14px;
        // border: 1px solid #dcdfe6;
        // border-radius: 4px;
        .transfer-pane-item{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 12px;
        }
      }
    }
  }
	.divider-box{
		background-color: #F0F2F5;
		width: 10px;
		height: 100%;
	}
	.ant-tag{
		font-size: 14px !important;
	}
</style>
